<template>
  <div class="model-form">
    <el-page-header @back="goBack" content="增加">
      <template #extra>
        <el-button type="primary" @click="pasteData">粘贴数据</el-button>
      </template>
    </el-page-header>
    <div class="model-content">
      <QueryForm   v-model="form"
                   @submit="createData"
                   @cancel="goBack"
                   ref="ruleForm"></QueryForm>
    </div>
  </div>
</template>

<script setup>
import {defineAsyncComponent, onMounted, ref} from "vue";
import {useCreate} from "@/uses/useCreate";
import {useRoute} from "vue-router";
import QueryForm from "./form.vue";
import {ElMessage} from "element-plus";


const form = ref({
  id: null,
  name: null,
  content: null,
  type: null,
  note: null,
  className:null,
  queryType:null,
  permission:null,
  extData: {
    filters:[]
  },
  sqlBatchObject:{
    sqlObjects:[]
  }
})


const ruleForm = ref(null);


const route = useRoute()
onMounted(()=>{
  console.log(route.params)
  if (route.query.catalog){
    form.value.queryCatalog=parseInt(route.query.catalog);
  }

})


const {createData,goBack} =useCreate("queryTemplate",form)
// 处理表单提交

const pasteData = async () => {
  try {
    // 读取剪切板内容
    const clipboardText = await navigator.clipboard.readText();

    let catalog=form.value.queryCatalog;
    // 解析JSON数据
    const jsonData = JSON.parse(clipboardText);
    jsonData.queryCatalog=null;
    Object.assign(form.value, jsonData)
    form.value.queryCatalog=catalog;

    ElMessage.success('数据粘贴成功！');
  } catch (error) {
    console.error('粘贴数据失败:', error);
    if (error.name === 'NotAllowedError') {
      ElMessage.error('无法访问剪切板，请确保已授予权限');
    } else if (error instanceof SyntaxError) {
      ElMessage.error('剪切板内容不是有效的JSON格式');
    } else {
      ElMessage.error('粘贴数据失败：' + error.message);
    }
  }
}
</script>

<style scoped>
</style>
